import React, { useState } from "react";
import styles from "./index.module.scss";
import { Image, Button } from "antd-mobile";
import { ApiLogin } from "@/utils/api";
import { useDispatch, useSelector } from "react-redux";
import { useAppSelector, useAppDispatch } from "@/hooks";
import { changeToken } from "@/store/home";
import { useNavigate } from "react-router-dom";

type Props = {};

export default function index({}: Props) {
  const count = useAppSelector((state) => state.login.token);
  const navigate = useNavigate();
  // 账号密码
  const [userInfo, setUserInfo] = useState({
    username: "13415225540",
    password: "wolfcode123",
  });
  // 登陆
  const loginFn = async () => {
    let res = await ApiLogin(userInfo.username, userInfo.password);
    if (res.errCode == 0) {
      localStorage.setItem("token", res.data);
      changeToken(res.data);
      navigate(-1);
    }
  };
  return (
    <div className={styles.container}>
      {/* logo */}
      <div className="yt_login_logo">
        <Image src="/images/logo.png"></Image>
      </div>
      {/* Login Page */}
      <div className="yt_login_text">Login Page</div>
      {/* 登陆 */}
      <div className="yt_login_area">
        <div className="yt_login_area_username">
          <input
            type="text"
            value={userInfo.username}
            onChange={(e) => {
              const val = e.target.value;
              setUserInfo({
                username: val,
                password: userInfo.password,
              });
            }}
          />
        </div>
        <div className="yt_login_area_password">
          <input
            type="password"
            value={userInfo.password}
            onChange={(e) => {
              const val = e.target.value;
              setUserInfo({
                username: userInfo.username,
                password: val,
              });
            }}
          />
        </div>
        <div className="yt_login_area_btn">
          <Button
            onClick={() => {
              loginFn();
            }}
          >
            直接登陆
          </Button>
        </div>
      </div>
      {/* 注册---返回首页 */}
      <div className="yt_login_go_back">
        <div className="yt_login_go">前往注册</div>
        <div
          className="yt_login_back"
          onClick={() => {
            navigate("/");
          }}
        >
          返回首页
        </div>
      </div>
      {/* footer */}
      <div className="yt_login_footer">
        <span>Copyright © </span>
        <span>前端乐哥 2022.</span>
      </div>
    </div>
  );
}
